<template>
  <view>
    <wxTopStatus backgroundColor="#fff">
      <view class="nav-title"> 我的关注 </view>
    </wxTopStatus>
    <view>
      <fui-search-bar
        background="#fff"
        inputBackground="#f5f5f5"
        :isLeft="true"
        @search="search"
        radius="999"
        placeholder="搜索已关注的人"
        @clear="clearFn"
        @close="clearFn"
      ></fui-search-bar>
    </view>

    <view class="list-box p-[30rpx]">
      <view class="flex-between">
        <view class="followCount">我的关注 ({{ page.total }})</view>
        <view class="sort">
          <!-- 下拉选择排序 -->
          <fui-dropdown-menu
            size="13px"
            selectedColor="#465CFF"
            :options="options"
            @click="rangeItemClick"
            @close="rangeClose"
            ref="ddmRange"
            :isCheckMark="true"
            padding="20rpx"
            checkmarkColor="#376af7"
            minWidth="200"
            :isReverse="true"
          >
            <view class="fui-filter__item" @click="filterTap">
              <text>{{ range }}</text>
              <view class="fui-filter__icon">
                <fui-icon name="switch" :size="32"></fui-icon>
              </view>
            </view>
          </fui-dropdown-menu>
        </view>
      </view>
      <view class="list flex-column gap-[20rpx] py-[20rpx]">
        <MeScrollPage ref="meScrollPageREF" type="body" :page="page">
          <view class="flex-column gap-[20rpx]">
            <dataComcern
              v-for="item in page.data"
              :key="item"
              :info="{
                userAvatar: item.avatar,

                // 'https://tse1-mm.cn.bing.net/th/id/OIP-C._YFRagbOM8FbGUSUJy-m6QAAAA?w=217&h=217&c=7&r=0&o=5&pid=1.7',
                userNickname: item.nickname,
                ...item,
              }"
              :idName="item.type == 1 ? 'uid' : 'factoryId'"
              @reGetData="meScrollPageREF.resetData()"
            ></dataComcern>
          </view>
        </MeScrollPage>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import dataComcern from "../../components/detaiConcern/index.vue";
import { getUserActionListAPI } from "@/api/common";
import { PageProps } from "@/hooks/usePage";
const rangeShow = ref(false); // 显示下拉
const range = ref("综合推荐");
const ddmRange = ref();
const meScrollPageREF = ref();
const filterTap = () => {
  rangeShow.value = true;
  ddmRange.value.show();
  console.log("showRanage", rangeShow.value);
};
const rangeItemClick = (e) => {
  console.log(e);
  range.value = e.text;
  page.params.order = e.value;
  meScrollPageREF.value.resetData();
};

const rangeClose = () => {
  rangeShow.value = false;
};
const clearFn = () => {
  page.params.search = "";
  meScrollPageREF.value.resetData();
};

const options = [
  {
    text: "综合排序",
    value: 1,
    checked: true,
  },
  {
    text: "最近关注",
    value: 2,
  },
  {
    text: "最早关注",
    value: 3,
  },
];

const page = reactive<PageProps>({
  params: {
    order: 1, //排序：1.综合排序 2.最近关注 3.最早关注
    type: 4,
    action: 1006,
    search: "",
    size: 20,
  },
  fetchData: getUserActionListAPI,
});

const search = (e) => {
  page.params.search = e.detail.value;
  meScrollPageREF.value.resetData();
};
</script>
<style lang="scss" scoped>
.nav-title {
  font-size: 18px;
  font-weight: 700;
}

.followCount {
  font-size: 12px;
  color: #999999;
}

.fui-filter__item {
  width: 230rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
  background-color: #fff;
}

.fui-filter__icon {
  // transition: all 0.15s linear;
  transform: rotate(90deg);
}

// .fui-icon__ani {
//   transform: rotate(180deg);
// }
</style>
